<template>
    <div class="center-box clear-fix">
        <div class="discovery_content_box">

            <div class="discovery_left_part float-left">
                <div class="discovery-left-menu-box">
                    <ul>
                        <li :class="currentCategoryId===item.id?'discovery_category_active':''"
                            v-for="(item,index) in categoriesList"
                            :key="index"
                            @click="onLeftMenuClick(item)">
                            <span v-text="item.title"></span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="discovery-center-part float-left">
                <div class="discovery_content_item clear-fix" v-for="(item,index) in contentList" :key="index">
                    <div class="item_left_cover float-left">
                        <el-image style="width: 180px;height: 180px"
                                  :src="item.pict_url + '_180x180xzq90.jpg_.webp'"
                                  fit="cover"></el-image>
                    </div>

                    <div class="item_right_info float-left">
                        <div class="item_title">
                            <a :href="item.coupon_click_url" target="_blank">
                                <span v-text="item.title"></span>
                            </a>
                        </div>
                        <div class="price_info">
                            <span class="original_price" v-text="'原价' + item.zk_final_price"></span>
                            <span>券后价:</span>
                            <span class="off_price" v-text="to2Bit(item.zk_final_price-item.coupon_amount)"></span>
                        </div>

                        <div class="sell-info">
                            <span v-text="item.volume"></span>
                            <span>.</span>
                            <span>已购买</span>
                        </div>
                    </div>
                    <a :href="item.coupon_click_url" class="discovery_buy_btn" type="danger" target="_blank">领券购买</a>
                </div>

                <div class="discovery_content_loading"
                     v-loading="mIsLoading"
                     element-loading-text="拼命加载中">

                    <p v-if="!hasMoreData" style="text-align: center; color: blueviolet;line-height: 100px">
                        没有跟多内容了...</p>
                </div>
            </div>

            <div class="discovery_right_part float-left">
                <div class="discovery-right-loop">
                    <el-carousel height="275px">
                        <el-carousel-item v-for="(item,index)  in loopData" :key="index">
                            <a target="_blank" :href="item.coupon_click_url">
                                <el-image style="width: 275px;height: 275px"
                                          :src="item.pict_url + '_270x270xzq90.jpg_.webp'"
                                          fit="cover"
                                          :autoplay="false">{{item}}
                                </el-image>
                            </a>

                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import api from "../../utils/api";

    export default {

        data() {

            return {
                mIsLoading: false,
                mCurrentPage: 1,
                hasMoreData: true
            }
        },

        methods: {
            /**
             * 加载分类内容
             * @param item
             */
            onLeftMenuClick(item) {
                // initParameter
                this.currentCategoryId = item.id;
                this.currentPage = 1;

                // 清空中间显示数据 (initAdapter)
                this.contentList.length = 0;
                this.contentList = [];

                // initData
                this.loadMore();

                // initView
                document.documentElement.scrollTop = 0;
                this.mIsLoading = true;

            },
            loadData() {
                api.getCategoriesContent(this.currentCategoryId, this.mCurrentPage).then(result => {
                    if (result.code === api.SUCCESS_CODE) {
                        // 添加新数据到末尾
                        this.contentList = this.contentList.concat(result.data);

                        // 判断是否还有数据，没有则不能加载更多了
                        console.log(result);
                        console.log(result.data.length);
                        if (result.data.length !== 52) {
                            this.hasMoreData = false;
                        }
                        this.mIsLoading = false;
                    } else {
                        this.mIsLoading = false;
                        this.mCurrentPage--;
                    }
                });
            },
            loadMore() {
                this.mCurrentPage++;

                this.loadData();
            },
            to2Bit(number) {
                return number.toFixed(2);
            },

            onScroll() {
                console.log("on window scroll");
                // use the code to change the video play speed
                // document.querySelector("video").playbackRate= 3;

                // initVariable
                let leftMenuBox = document.getElementsByClassName("discovery-left-menu-box");

                let loops = document.getElementsByClassName("discovery-right-loop");

                let contentBox = document.getElementsByClassName("discovery-center-part");

                let contentBoxHeight = contentBox[0].offsetHeight - document.documentElement.clientHeight + 90;


                // initView
                if (leftMenuBox && loops) {
                    let dy = document.documentElement.scrollTop;

                    if (dy >= 90) {
                        leftMenuBox[0].style.top = '10px';
                        loops[0].style.top = '10px';
                    } else {
                        leftMenuBox[0].style.top = (90 - dy) + 'px';
                        loops[0].style.top = (90 - dy) + 'px';
                    }

                    console.log("dy --->" + dy);
                    console.log("contentBoxHeight --->" + contentBoxHeight);
                    if (dy >= contentBoxHeight && this.mIsLoading === false && this.hasMoreData) {
                        // TODO: 触发一次加载更多
                        this.mIsLoading = true;

                        this.loadMore();
                    }
                }
            },
        },

        async asyncData() {
            let categories = await api.getCategories();

            if (categories.code === api.SUCCESS_CODE) {
                let categoriesList = categories.data;
                let firstDatum = categoriesList[0];

                let currentCategoryId = firstDatum.id;
                let contentResult = await api.getCategoriesContent(currentCategoryId, 1);

                if (contentResult.code === api.SUCCESS_CODE) {
                    return {
                        currentCategoryId,
                        categoriesList,
                        contentList: contentResult.data,
                        loopData: contentResult.data.slice(0, 5)
                    }
                }
            }

        },

        mounted() {

            this.onScroll();

            // initListener
            window.addEventListener("scroll", this.onScroll);


            // initView
            this.$store.commit('setCurrentActive', 'discovery');

            // calculate the discovery_center_part's minHeight by the screen's size
            let centerPart = document.getElementsByClassName('discovery-center-part');
            centerPart[0].style.minHeight = window.screen.height + 'px';
        }
    }
</script>

<style>
    .discovery-left-menu-box {
        box-shadow: 0 5px 10px #d4d4d4;
        position: fixed;
    }

    .original_price {
        text-decoration: line-through;
    }

    .off_price {
        color: orangered;
    }

    .discovery_buy_btn:hover {
        border-color: orangered;
        background-color: orangered;
    }

    .discovery_buy_btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: white;
        border-color: #F56C6C;
        background-color: #F56C6C;
        text-decoration: none;
        padding: 8px 20px;
        border-radius: 5px;
    }

    .discovery_content_box {
        margin-top: 20px;
    }

    .discovery_left_part {
        width: 105px;
        margin-right: 10px;
        margin-left: 5px;
    }

    .discovery-left-menu-box li {
        text-align: center;
        width: 105px;
        height: 40px;
        cursor: pointer;
        list-style-type: none;
    }

    .discovery-left-menu-box ul {
        padding: 0;
        list-style: none;
    }

    .discovery-left-menu-box li:hover {
        background: #ff4500;
    }

    .discovery-left-menu-box span {
        text-align: center;
        line-height: 40px;
    }

    .discovery-center-part {
        margin-left: 130px;
        margin-right: 10px;
        width: 710px;
    }

    .discovery_content_item {
        position: relative;
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0 5px 10px #d4d4d4;
        padding: 10px;
    }

    .item_left_cover img {
        border-radius: 5px;
    }

    .item_title a {
        font-size: 22px;
        color: #47494e;
        text-decoration: none;
    }

    .item_title {
        max-width: 500px;
        font-weight: 600;
        cursor: pointer;
    }

    .item_left_cover {

    }

    .discovery_right_part {
        width: 275px;
        margin-left: 10px;
        margin-right: 5px;
    }

    .discovery_category_active {
        color: #ffffff;
        background: #ff4500;
    }

    .item_right_info {
        margin-left: 10px;
    }

    .price_info {
        margin: 10px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .sell-info {
        margin: 10px 0;
        color: #47494e;
        font-size: 10px;
    }

    .discovery-right-loop {
        position: fixed;
        width: 275px;
        height: 275px;
        box-shadow: 0 5px 10px #d4d4d4;
    }

    .discovery-right-loop .el-carousel__button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .discovery_content_loading {
        width: 100%;
        height: 104px;
        box-shadow: 0 5px 10px #d4d4d4;
        margin-bottom: 10px;
    }
</style>